/**
*@Create:YMHUI
*@DateTime:2019/10/169:20
*@Description:TODO
**/
<template>
    <div>
        <el-row>
            <el-row v-if="questionnaire.state === '未发布'" style="text-align: right">
                <el-button type="text" icon="el-icon-edit"
                           @click="editDialogVisible = true"></el-button>
                <el-button :disabled="single.sort === 1" @click="questionMove(-1)" type="text"
                           icon="el-icon-top"/>
                <el-button :disabled="single.sort === questionnaire.questions.length" @click="questionMove(1)"
                           icon="el-icon-bottom" type="text"/>
                <el-button type="text" icon="el-icon-delete" @click="deleteThisSingle"/>
            </el-row>
            <el-row>
                <el-form :inline="true">
                    <el-form-item :label="single.sort.toString()">
                        <div>{{single.topic}}</div>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col v-for="(choice, index) in single.choiceVos" :key="index">
                    <el-radio :label="index">{{choice.description}}</el-radio>
                </el-col>
            </el-row>
        </el-row>

        <el-dialog title="题目编辑" width="40%" :visible.sync="editDialogVisible">
            <el-row>
                <div>
                    <el-form label-width="60px">
                        <el-form-item label="标题">
                            <el-input type="textarea" rows="2" v-model="single.topic"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-table :data="single.choiceVos" size="mini"
                              border
                              highlight-current-row>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="选项描述" prop="description">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row.edit" v-model="scope.row.description"></el-input>
                                <span v-else>{{scope.row.description}}</span>
                                <!--                        <el-input v-model="single.choiceVos[scope.$index].description"></el-input>-->
                            </template>
                        </el-table-column>
                        <el-table-column label="选项分数" prop="score">
                            <template slot-scope="scope">
                                <el-input v-if="single.choiceVos[scope.$index].edit"
                                          v-model="scope.row.score"></el-input>
                                <span v-else>{{scope.row.score}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.edit" type="text" size="medium"
                                           @click="confirmAdd(scope.$index)">
                                    <i class="el-icon-check" aria-hidden="true"></i>
                                </el-button>
                                <div v-else>
                                    <el-button type="text" size="medium" @click="editData(scope.$index)">
                                        <i class="el-icon-edit" aria-hidden="true"></i>
                                    </el-button>
                                    <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                                        <i class="el-icon-delete" aria-hidden="true"></i>
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div>
                    <span class="el-table-add-row" @click="addChoice">+添加</span>
                </div>
            </el-row>
            <el-row style="text-align: center; padding-top: .5em">
                <el-button @click="editFinish" type="primary" size="mini">编辑完成</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex';
    import util from "../../common/util";
    import {MessageBox} from 'element-ui'
    import Vue from 'vue'

    export default {
        name: "SingleSelect",
        props: {
            single: Object
        },
        computed: {
            ...mapGetters('questionnaire', [
                'currentQuestionnaire'
            ])
        },
        data() {
            return {
                popoverVisible: false,
                editorOption: {},
                questionnaire: {},
                up: false,
                down: false,
                editDialogVisible: false
            }
        },
        methods: {
            ...mapActions('questionnaire', [
                'setCurrentQuestionnaire',
                'deleteSingleChoiceQuestionAct',
                'deleteChoiceAct'
            ]),
            addChoice() {
                this.single.choiceVos.push({
                    id: '',
                    description: '新建选项',
                    score: 1,
                    edit: true
                })
            },
            //确认添加
            confirmAdd(index) {
                this.single.choiceVos[index].edit = false;
                this.single.choiceVos[index].score = parseInt(this.single.choiceVos[index].score);
            },
            //修改
            editData(index) {
                for (let i in this.single.choiceVos) {
                    if (this.single.choiceVos[i].edit) {
                        return;
                    }
                }
                this.single.choiceVos[index].edit = true;
            },
            //删除
            deleteData(row, index) {
                this.single.choiceVos.splice(index, 1);
                if (row.id !== "") {
                    this.deleteChoiceAct({id: row.id});
                }
            },
            editFinish() {
                for (let index in this.single.choiceVos) {
                    if (this.single.choiceVos[index].edit) {
                        MessageBox.alert("请保存编辑内容！", "警告");
                        return;
                    }
                }
                this.refreshDimensionQuestions(this.questionnaire.dimensions);
                this.setCurrentQuestionnaire(this.questionnaire);
                this.editDialogVisible = false;
            },

            refreshDimensionQuestions(dimensions) {
                dimensions.forEach(dimension => {
                    if (dimension.questions.length === 0) {
                        this.refreshDimensionQuestions(dimension.children);
                    } else {
                        for (let index in dimension.questions) {
                            if (dimension.questions[index].sort === this.single.sort) {
                                dimension.questions.splice(index, 1);
                                dimension.questions.push(this.single);
                            }
                        }
                    }
                });
            },

            deleteDimensionQuestion(dimensions, sort) {
                dimensions.forEach(dimension => {
                    let index = dimension.questions.findIndex(question => question.sort === sort);
                    if (index !== -1) {
                        dimension.questions.splice(index, 1);
                        return;
                    }
                    this.deleteDimensionQuestion(dimension.children, sort);
                })
            },

            async deleteThisSingle() {
                let index = this.questionnaire.questions.findIndex(question => question.sort === this.single.sort);
                this.questionnaire.questions.splice(index, 1);
                this.deleteDimensionQuestion(this.questionnaire.dimensions, this.single.sort);
                if (this.single.id !== "") {
                    await this.deleteSingleChoiceQuestionAct({id: this.single.id});
                }
                this.resetSort();
                this.setCurrentQuestionnaire(this.questionnaire);
            },

            resetSort() {
                for (let sort in this.questionnaire.questions) {
                    this.questionnaire.dimensions.forEach(dimension => {
                        this.resetDimensionQuestionSort(dimension, sort + 1, this.questionnaire.questions[sort].sort);
                    });
                    this.questionnaire.questions[sort].sort = parseInt(sort) + 1;
                }
            },

            resetDimensionQuestionSort(dimension, newSort, oldSort) {
                dimension.questions.forEach(question => {
                    if (question.sort === oldSort) {
                        question.sort = newSort;
                    }
                });
                if (dimension.children.length !== 0 && dimension.children) {
                    dimension.children.forEach(child => {
                        this.resetDimensionQuestionSort(child, newSort, oldSort);
                    })
                }
            },

            /**
             *
             * @param step 1下移， -1上移
             */
            questionMove(step) {
                let curSort = this.single.sort;
                let targetSort = this.single.sort + step;
                let curIndex = this.questionnaire.questions.findIndex(question => question.sort === curSort);
                let targetIndex = curIndex + step;
                let temp = this.questionnaire.questions[targetIndex];
                Vue.set(this.questionnaire.questions, targetIndex, this.questionnaire.questions[curIndex]);
                Vue.set(this.questionnaire.questions, curIndex, temp);
                // this.questionnaire.questions[targetIndex] = this.questionnaire.questions[curIndex];
                // this.questionnaire.questions[curIndex] = temp;
                let tempSort = 100000;
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, tempSort, curSort);
                }
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, curSort, targetSort);
                }
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, targetSort, tempSort);
                }
                for (let index in this.questionnaire.questions) {
                    //Vue.set(this.questionnaire.questions, index, parseInt(index) + 1);
                    this.questionnaire.questions[index].sort = parseInt(index) + 1;
                }
                this.setCurrentQuestionnaire(this.questionnaire);
            }

        },
        watch: {
            currentQuestionnaire() {
                this.questionnaire = this.currentQuestionnaire;
            }
        },
        mounted() {
            //this.questionnaire = this.currentQuestionnaire;
        },
        created() {
            this.questionnaire = this.currentQuestionnaire;
        }
    }
</script>

<style scoped>
    .el-table-add-row {
        margin-top: 10px;
        width: 100%;
        height: 34px;
        border: 1px dashed #c1c1cd;
        border-radius: 3px;
        cursor: pointer;
        justify-content: center;
        display: flex;
        line-height: 34px;
    }

</style>
